<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue入门</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<hello v-if="isShow"></hello>
			<!--使用组件-->
			<school></school>
			<hr />
			<student></student>
			<hr />
		</div>
		<div id="root2">
			<h2>root2容器</h2>
			<hello></hello>
		</div>
		<script type="text/javascript">
			Vue.config.productionTip = false;
			//全部注册
			/**
			 * 想用组件的三个步骤
			 * 1.创建组件
			 * 2.注册组件
			 * 3.使用组件
			 */
			//创建school组件
			const school = Vue.extend({
				template: `
	              <div>
	              <h2>学校名称:{{ schoolName }}</h2>
	              <h2>学校地址:{{ address }}</h2>
	              <button @click="showName">点我提示学校名</button>
	              </div>
	            `,
				//组件定义不要写el配置项，因为最终所有的组件都要被vm所管理，由vm决定服务于哪个容器
				//这里data必须写成函数形式 避免多次使用组件导致共用data对象导致一个问题
				data() {
					//注意这里不要写箭头函数
					return {
						schoolName: '社会大学',
						address: '贵阳',
					}
				},
				methods: {
					showName() {
						alert(this.schoolName)
					}
				}
			})
			//创建school组件
			const student = Vue.extend({
				template:
	            `<div>
	              <h2>学生名字:{{ studentName }}</h2>
	              <h2>学生年龄:{{ age }}</h2>
	            </div>`,
				data() {
					return {
						studentName: '杰克',
						age: 18
					}
				}
			});
	
			const hello = Vue.extend({
				template: `
	          <div>
	            <h2>你好世界,{{ name }}</h2>
	          </div>
	        `,
				data() {
					return {
						name: '张三'
					}
				}
			});
	
			//hello组件
			Vue.component('hello', hello); //全局注册hello 就代表所有组件都可以用hello组件了
	
			// 创建vm
			var vm = new Vue({
				el: "#root",
				//配置组件(局部注册)
				data: {
					msg: 'hello world',
					isShow:false
				},
				components: {
					school,
					student
				},
			})
	
			new Vue({
				el: '#root2',
			});
		</script>
	</body>
</html>
